<template>
  <div class="container">
    <div class="search-main">
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable style="width: 200px"
                    @keyup.enter="handleQuery"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery" size="">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery" size="">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-row class="">
      <el-col :span="24">
        <el-button type="primary" plain icon="Plus" @click="handleAdd" size="">新增</el-button>
      </el-col>
    </el-row>

    <vxe-grid v-bind="gridOptions" v-on="gridEvents" ref="gridRef">
      <template #action="{ row }">
        <template v-if="hasEditStatus(row)">
          <el-button type="primary" @click="saveRowEvent(row)" size="">保存</el-button>
          <el-button @click="cancelRowEvent()" size="">取消</el-button>
        </template>
        <template v-else>
          <el-button type="primary" @click="editRowEvent(row)" size="" plain>编辑</el-button>

          <el-popconfirm title="确实要删除当前项吗?" @confirm="deleteRow(row)">
            <template #reference>
              <el-button type="primary" @click="" size="" plain color="#ff4444f7">删除</el-button>
            </template>
          </el-popconfirm>

          <el-dropdown placement="bottom-start"
                       :popper-options="{
            modifiers: [
              {
                name: 'computeStyles',
                options: { gpuAcceleration: false, adaptive: false },
              },
            ],
          }">
            <el-button type="success" plain style="margin-left: 10px">更多</el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleDrop(1, row)">页面配置</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

        </template>
      </template>
    </vxe-grid>

    <!-- 添加或修改岗位对话框 -->
    <el-dialog title="新增用户" v-model="state.dialogVisible" width="500" append-to-body
               :close-on-click-modal="false">
      <el-form ref="postRef" :model="form" :rules="rules" label-width="100">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="form.roleName" placeholder="请输入角色名称"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 分配权限 -->
    <Permission ref="permissionRef" @handleQuery="handleQuery"></Permission>

  </div>
</template>

<script setup name="SystemRole">
import {reactive, ref, toRefs, onMounted , defineAsyncComponent} from "vue";
import * as SystemApi from "@/api/systemApi";
import {ElMessage} from "element-plus";
import Permission from './components/permission.vue';

const permissionRef = ref();
const gridRef = ref();
const queryRef = ref(null);
const {log} = console;
//组件状态
const state = reactive({
  dialogVisible: false,
  form: {
    roleName: '',
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    roleName: null,
    systemType: 2,
  },
});

const {queryParams, form} = toRefs(state);

//add 
async function submitForm() {
  let res = await SystemApi.roleSave(form.value);
  if (res.code == 200 && res.data) {
    ElMessage.success("操作成功");
    handleQuery();
  }
  state.dialogVisible = false;
}

function cancel() {
  state.dialogVisible = false;
}

//表格配置
const gridOptions = reactive({
  minHeight: 0,
  emptyText: "暂无数据！",
  keepSource: true,
  headerRowClassName: "table-head-cla",
  border: true,
  showOverflow: true,
  loading: false,
  align: "center",
  rowConfig: {
    isCurrent: true,
    isHover: true,
  },
  size: "small",
  autoResize: true,
  columnConfig: {
    isHover: true,
    resizable: false,
  },
  editConfig: {
    showIcon: false, //是否显示列头编辑图标
    trigger: "manual",
    showStatus: true,
    autoClear: true,
    mode: "row",
  },
  pagerConfig: {
    border: true,
    enabled: true,
    currentPage: 1,
    pageSize: 10,
    total: 0,
    layouts: [
      "Home",
      "PrevJump",
      "PrevPage",
      "Number",
      "NextPage",
      "NextJump",
      "End",
      "Sizes",
      "FullJump",
      "Total",
    ],
  },
  columns: [
    {type: "seq", width: 70},
    {
      field: "roleName",
      title: "角色名称",
      sortable: true,
      editRender: {name: "VxeInput"},
    },
    {field: "createByUserName", title: "创建人"},
    {field: "createTime", title: "创建日期", sortable: true},
    {field: "updateByUserName", title: "修改人"},
    {field: "lastModifyTime", title: "修改日期", sortable: true},
    {title: "操作", slots: {default: "action"}},
  ],
  data: [],
});

//分页事件
const gridEvents = {
  pageChange({pageSize, currentPage}) {
    gridOptions.pagerConfig.currentPage = currentPage;
    gridOptions.pagerConfig.pageSize = pageSize;
    queryParams.value.pageNum = currentPage;
    queryParams.value.pageSize = pageSize;
    handleQuery(queryParams);
  },
};


function handleAdd() {
  state.dialogVisible = true;
}

//查询list
async function handleQuery() {
  gridOptions.loading = true;
  let res = await SystemApi.roleSearch(queryParams.value);
  gridOptions.data = res.data.records;
  gridOptions.pagerConfig.total = res.data.total
  gridOptions.loading = false;
}

function resetQuery() {
  queryRef.value.resetFields();
}

const hasEditStatus = (row) => {
  const $grid = gridRef.value;
  if ($grid) {
    return $grid.isEditByRow(row);
  }
};

const editRowEvent = (row) => {
  const $grid = gridRef.value;
  if ($grid) {
    $grid.setEditRow(row);
  }
};

//编辑用户
const saveRowEvent = async (row) => {
  const $grid = gridRef.value
  if ($grid) {
    $grid.clearEdit().then(async () => {
      let res = await SystemApi.roleSave(row);
      if (res.code == 200 && res.data) {
        ElMessage.success("操作成功");
        handleQuery();
      }

    })
  }

};

//编辑取消
const cancelRowEvent = (row) => {
  const $grid = gridRef.value;
  if ($grid) {
    $grid.clearEdit().then(() => {
      // 还原行数据
      $grid.revertData(row);
    });
  }
};

//删除数据
async function deleteRow(row) {
  let res = await SystemApi.roleDel(row.id);
  if (res.code == 200 && res.data) {
    ElMessage.success("操作成功");
    handleQuery();
  }
}

onMounted(() => {
  handleQuery();

});

function handleDrop(command , row) {
  permissionRef.value.open(row);
}


</script>

<style scoped lang="scss">
.container {
  .search-main {
    line-height: 78px;

    .el-form-item {
      margin-bottom: 0px;
    }
  }

  .el-row {
    margin-bottom: 10px;
  }
}
</style>
